<template>
  <div>
    <div v-if="flag === 'shopConfig'" class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>门店选址评估</el-breadcrumb-item>
        <el-breadcrumb-item>{{ '详情' }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="backConfigDetail">返回</el-button>
      </div>
    </div>
    <div v-loading="dataLoading">
      <c-list label-width="140" :column="4">
        <c-list-item label="申请人" :value="formData.applicantName||formData.applicantCode" />
        <c-list-item label="申请人电话" :value="formData.applicantPhone" />
        <c-list-item label="选址评估进度" dict-type-code="SHOP_LOCATION_EVAL_STATE" :value="formData.state" />
        <c-list-item label="办事处" :value="formData.officeName" />
        <c-list-item label="办事处性质" :value="formData.officeNature" />
        <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="formData.marketSubdType" />
        <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="formData.businessType" />
        <c-list-item label="新商类别" dict-type-code="NEW_BUSINESS_CATEGORY" :value="formData.newShopType" />
        <!-- <c-list-item v-if="formData.isDealerMultMarket==='1'||formData.isDealerMultMarket==='0'" label="一商多市场" :value="formData.isDealerMultMarket==='1'?'是':'否'" /> -->
        <c-list-item v-if="formData.isReferExistDealer==='1'||formData.isReferExistDealer==='0'" label="选址商家与已建档案商家是否有关系" :value="formData.isReferExistDealer==='1'?'有关系':'无关系'" />
        <c-list-item v-if="formData.relationDesc" label="具体关系描述" :value="formData.relationDesc" />
        <c-list-item label="选择类别的原因" :span="2" :value="formData.newShopReason" />
        <c-list-item label="是否新建客户档案" :value="formData.isNewCustomerProfile===1?'是':'否'" />
        <c-list-item label="预报图区域" :span="4" :value="formaterData(areaList,formData.reportPicZone)" />
        <c-list-item label="客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户" :value="formData.clientName" />
        <c-list-item v-if="formData.referCustomerName" label="关系客户" :value="formData.referCustomerName" />
        <c-list-item v-if="formData.referCustomerCode" label="关系客户编码" :value="formData.referCustomerCode" />
        <c-list-item label="经销商姓名" :value="formData.customerName" />
        <c-list-item label="经销商身份证号" :value="formData.customerIdcardNo" />
        <c-list-item label="经销商电话" :value="formData.customerPhone" />
        <c-list-item label="所在楼层" :value="formData.floors" />
        <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="formData.shopType" />
        <c-list-item label="门店面积" :value="formData.shopArea" />
        <c-list-item label="城市级别" dict-type-code="CITY_LEVEL" :value="formData.cityLevel" />
        <c-list-item label="市场层级" dict-type-code="MARKET_LEVEL" :value="formData.shopMarketLevel" />
        <!-- <c-list-item label="卖场名称" :value="formData.shopName" /> -->
        <c-list-item label="省份" :value="formData.provinceName" />
        <c-list-item label="城市" :value="formData.cityName" />
        <c-list-item label="区/县" :value="formData.areaName" />
        <c-list-item label="乡镇/街道" :value="formData.streetName" />
        <c-list-item label="门店地址" :span="4" :value="formData.shopAddress" />

        <c-list-item label="是否黄金地段" :value="formData.isPrimeLot==='1'?'是':'否'" />
        <c-list-item label="黄金地段详情描述" :span="4" :value="formData.primeLotDesc" />
        <c-list-item label="是否KA卖场" :value="formData.isKaShop==='1'?'是':'否'" />
        <c-list-item label="KA卖场详情描述" :span="4" :value="formData.kaShopDesc" />
        <c-list-item label="备注" :span="4" :value="formData.remark" />
      </c-list>
      <c-section title="审核结果">
        <c-list :column="3">

          <c-list-item label="办事处经理审批结果" dict-type-code="LOCATION_EVAL_REVIEW_RESULT" :value="formData.reviewResult" />
          <c-list-item type="textarea" :span="2" label="办事处经理审批意见" :value="formData.reviewAdvice" />
          <c-list-item label="档案科处理结果" dict-type-code="REVIEW_RESULT" :value="formData.processResult" />
          <c-list-item type="textarea" :span="2" label="档案科处理意见" :value="formData.processAdvice" />
        </c-list>
      </c-section>
      <c-section title="档案维护">
        <c-list :column="4">
          <c-list-item label="客户编码" :value="formData.mdmClientCode" />
          <c-list-item label="所属客户" :value="formData.mdmClientName" />
          <c-list-item label="经销商姓名" :value="formData.mdmCustomerName" />
          <c-list-item label="经销商身份证号" :value="formData.mdmCustomerIdcardNo" />
          <c-list-item label="门店编码" :value="formData.mdmShopCode" />
          <c-list-item label="所属门店" :value="formData.mdmShopName" />
          <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="formData.mdmShopType" />
          <c-list-item label="城市级别" dict-type-code="CITY_LEVEL" :value="formData.mdmCityLevel" />
          <c-list-item label="门店面积" :value="formData.mdmShopArea" />
          <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="formData.businessStatus" />
          <c-list-item :span="4" label="门店地址" :value="formData.mdmShopAddress" />
          <!-- <c-list-item :span="3" label="档案维护说明" :value="formData.maintainDesc" /> -->
          <c-list-item type="textarea" :span="4" label="档案维护说明" :value="formData.maintainDesc" />

        </c-list>
      </c-section>
      <div style="margin-bottom:20px;">
        <div class="qup-title-box"><span class="border" /><span>附件信息</span></div>
        <template>
          <table-box
            ref="refFile"
            :table-config="fileDataConfig"
            :table-height="400"
            :data="fileData"
            show-index
          />
        </template>
      </div>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="[previewImg]"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { filterURL } from '@/utils'
import { getDetailById } from '@/api/shopAddEva/index'
import { getShopAttachment, getAreaList } from '@/api/common.js'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'DetailStoreAdd',
  components: { ElImageViewer },
  mixins: [BackPageMixin],
  props: {
    childrenId: {
      type: String,
      default: ''
    },
    flag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: '',
      dataLoading: false,
      imgDialogVisible: false,
      previewImg: '',
      areaList: [], // 区域配置列表
      url: '/pdf-file/',
      fileData: [], // 附件信息
      formData: {},
      fileDataConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'attachmentType',
            label: '附件类型',
            minWidth: '140'
          },
          {
            prop: 'attachmentName',
            label: '附件名称',
            minWidth: '140'
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '140'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            minWidth: '140'
          },
          {
            label: '操作',
            button: [
              {
                name: '预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '下载',
                clickFun: this.handleDownload,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }]
      }
    }
  },
  created() {
    this.id = this.$route.query.id || this.childrenId
    if (this.id) {
      this.dataLoading = true
      this.getFiles()
      this.getAreaSelect()
      getDetailById(this.id).then(res => {
        if (res.success === 1) {
          this.formData = res.data
          this.dataLoading = false
        }
      })
    }
  },
  methods: {
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.areaList = res.data.records
      })
    },
    // 区域格式化数据
    formaterData(arr, value) {
      if (!value || !arr) {
        return value || ''
      }
      let list = []
      if (typeof (value) === 'string') {
        list = value.split(',')
      } else {
        list = value
      }
      const temp = []
      arr.forEach((item) => {
        const flag = list.some(v => v === item.areaCode)
        if (flag) {
          temp.push(item.areaName)
        }
      })
      return temp.toString() || value
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.fileData = res.data
      })
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handleDownload(file) {
      const a = document.createElement('a')
      const url = `/pdf-file/` + file.attachmentUrl
      const fileName = file.attachmentName
      a.href = url
      a.download = fileName
      a.click()
    },
    handlePreview(file) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'pdf') {
        // pdf预览
        const url = `/pdf-file/` + file.attachmentUrl
        const routeData = this.$router.resolve({
          path: '/viewFile',
          query: {
            src: btoa(url)
          }
        })
        window.open(routeData.href, '_blank')
      } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        this.previewImg = filterURL(file.attachmentUrl)
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
        // word,excel预览
        window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    handleChangeAgency() {

    },
    backConfigDetail() {
      this.$emit('goBack', false)
    }

  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
